<template>
    <div style=" display: flex; flex-direction: column;">
      <el-form :inline="true" :model="queryForm" style="margin-top: 20px;margin-left: 20px;">
        <el-form-item label="分类名称">
          <el-input v-model="queryForm.name" placeholder="请输入分类名称" clearable />
        </el-form-item>
        <el-form-item label="类型" style="width: 130px;">
          <el-select v-model="queryForm.type" placeholder="请选择" clearable>
            <el-option label="菜品类型" value="1" />
            <el-option label="套餐类型" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addOrUpdate(true,null)">新增分类</el-button>
        </el-form-item>
      </el-form>  
      <el-table :data="tableData" :default-sort="{ prop: 'sort', order: 'ascending' }" style="width: 100%">
        <el-table-column fixed prop="name" label="分类名称" width="150" align="center" />
        <el-table-column prop="type" label="类型" width="150" align="center" >
            <template v-slot="{ row }">
            <span v-if="row.type === 1">药品分类</span>
            <span v-else>组合分类</span>
          </template>
        </el-table-column>
        <el-table-column  prop="sort" label="序号" width="150" align="center" />
        <el-table-column prop="status" label="状态" width="100" align="center">
          <template v-slot="{ row }">
            <span v-if="row.status === 1">启用</span>
            <span v-else>禁用</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="120" align="center" />
        <el-table-column prop="updateTime" label="最后操作时间" width="120" align="center" />
        <el-table-column fixed="right" label="操作" width="140" align="center">
          <template v-slot="{row}">
            <el-popconfirm :icon="InfoFilled" @confirm="confirmEvent(row.id)" @cancel="cancelEvent" title="你确定要删除该账号吗?">
              <template #reference>
                <el-button link type="primary" size="small">删除</el-button>
              </template>
            </el-popconfirm>
            <el-button link type="primary" size="small" @click="addOrUpdate(false,row)">修改</el-button>
            <el-button link type="primary" size="small" v-if="row.status===0" @click="updateStatus(row.id,row.status)">启用</el-button>
            <el-button link type="primary" size="small" v-if="row.status===1" @click="updateStatus(row.id,row.status)">禁用</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex; margin-top: 20px; margin-left: 240px;">
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[6, 8, 10]"
          :small="small" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
          :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>  
      <CategoryForm ref="categoryForm" :onSubmit="onSubmit"></CategoryForm>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref } from 'vue';
  import { reactive } from 'vue'
  
  const queryForm = reactive({
    name: '',
    type: null
  })
  
  //分页
  const total = ref(Number)
  const currentPage = ref(1)
  const pageSize = ref(6)
  const small = ref(true)
  const background = ref(false)
  const disabled = ref(false)
  
  const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
    pageSize.value = val
    onSubmit();
  }
  const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
    currentPage.value = val
    onSubmit();
  }
  
  const tableData = ref([])
  import { getList } from '@/apis/category.js'
  async function getCategoryList() {
    const res = await getList(currentPage.value, pageSize.value)
    console.log(res)
    tableData.value = res.data.data.records
    console.log(res.data.data.total)
    total.value = res.data.data.total
  }
  getCategoryList()
  
  //条件查询
  const onSubmit = async () => {
    console.log('submit!')
    const res = await getList(currentPage.value, pageSize.value,queryForm.name,queryForm.type)
    console.log(res.data.data.records)
    tableData.value = res.data.data.records
    total.value = res.data.data.total
  }
  
  //删除
  import { InfoFilled } from '@element-plus/icons-vue'
  import {deleteCategory} from '@/apis/category.js'
  import { ElMessage} from 'element-plus'
  const confirmEvent = async (id: string) => {
    console.log('删除!' + id)
    //删除该分类
    const res = await deleteCategory(id);
    console.log(res)
    if(res.data.code===0){
        ElMessage.error(res.data.msg)
    }
    //并刷新表格
    onSubmit()
  }
  const cancelEvent = () => {
    console.log('取消!')
  }
  
 import CategoryForm from './CategoryForm.vue'
  

  const categoryForm=ref(null)
  //添加分类
  function addCategory() {
    categoryForm.value.changeDialogVisible(true)
     console.log('添加分类!')
  }
  //修改员工信息
  function updateCategory(row: any) {
    console.log('修改分类!')
    categoryForm.value.changeDialogVisible(false)
    categoryForm.value.editFormData(row)
  }
  function addOrUpdate(isadd:boolean,row:any){
    if(isadd){
      console.log('添加分类!')
      addCategory()
    }else{
      console.log('修改分类!')
      updateCategory(row)
    }
  }  
  import {editStatus} from '@/apis/category.js'
  //启用 禁用
  async function updateStatus(id:any,status:any){
  const res= await editStatus(id,status)
  //提示信息
  const str=status===1?'禁用':'启用'
  ElMessage.success(str+'成功')
  console.log(res.data)
  onSubmit();
}
  </script>